<template>
  <div>
    <Banner :bannerimgs="bannerimgs" />
    <Headline headline="专业摄影" underline="带来更美的你" />
    <Imgcard :imgs="imgs" />
    <About />
    <Backatt />
    <Headline headline="特色产品" underline="发现更美的你" />
    <Tabs :Tabimgs="Tabimgs" />
    <Bottom />
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import Banner from '@/components/Banner.vue'
import About from './components/About.vue'
import Imgcard from './components/imgcard.vue'
import Tabs from './components/Tabs.vue'
import Backatt from './components/Backatt.vue'
import Bottom from '@/components/Bottom.vue'
import Headline from '@/components/Headline.vue'
import { getBanner,getCard,getTabPan} from '@/apis/Home'
// 初始化数据
const bannerimgs = ref([])
const imgs = ref([])
const Tabimgs=ref([])

// 生命周期钩子
onMounted(() => {
  findBanner()
  findCard()
  findTab()
})

// 获取轮播图数据
const findBanner = async () => {
    const res = await getBanner()
      bannerimgs.value = res.data
}

// 获取专业摄影数据
const findCard = async () => {
  try {
    const res = await getCard()
    if (res.code === '0') {
      imgs.value = res.data
    } else {
      ElMessage.error(res.msg)
    }
  } catch (error) {
    ElMessage.error('获取卡片数据失败')
    console.error(error)
  }
}

//获取Tabpan数据
const findTab = async () =>{
  const res = await getTabPan()
  Tabimgs.value=res.data
}
</script>

<style scoped>
/* 保持原有样式不变 */
</style>